<template>
  <div class="homewrap">
    <div class="lh-wrap">
      <div class="chanpinshang-list-titleName">
        商品列表
      </div>
      <input class="proNewAdd" type="button" value="新增商品"  @click="dialogFormVisible = true"/>
      <prolist-search :proinfo="proinfo"></prolist-search>
      <prolist-table :proinfo="proinfo"></prolist-table>
      <prolist-pagination :proinfo="proinfo" ref="prolistPagin"></prolist-pagination>
    </div>
  </div>
</template>

<script>
import ProlistTable from './components/ProlistTable'
import ProlistPagination from './components/ProlistPagination'
import ProlistSearch from './components/ProlistSearch'
import request from '@/utils/request.js'
export default {
  name: 'ProList',
  components: {
    ProlistTable,
    ProlistPagination,
    ProlistSearch
  },
  data () {
    return {
      proinfo: {}
    }
  },
  methods: {
    getProInfo (data) {
      request.proListInfo(data)
        .then((res) => {
          this.proinfo = res
        })
        .catch((error) => {
          console.log(error)
        })
    },
    paginClick (a, b, c, d, e) {
      this.$refs.prolistPagin.handleCurrentChange(a, b, c, d, e)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.homewrap
  padding 20px 20px 5px
  .lh-wrap
    min-width 960px
    box-sizing border-box
    background-color #fff
    padding 30px
    box-shadow 0px 2px 5px #e5e6ec
    .proNewAdd
      display block
      margin-bottom 27px
      width 120px
      height 36px
      line-height 36px
      text-align center
      background-color $baseColor
      font-size 16px
      color #fff
      border-radius 4px
      cursor pointer
    .chanpinshang-list-titleName
      line-height 36px
      color #333
      font-size 24px
      margin-bottom 18px
      box-sizing border-box
</style>
